<!--
 * @Author: 李天惊 uf_lee@163.com
 * @Date: 2022-11-21 20:33:09
 * @LastEditors: 李天惊 uf_lee@163.com
 * @LastEditTime: 2025-03-24 14:29:26
 * @FilePath: \global-brain\global-brain-admin\src\components\Upload\src\UploadFile.vue
 * Copyright (c) 2022 by 李天惊 uf_lee@163.com, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, watch } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { ElUpload, ElButton, ElInput } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const props = defineProps({
  modelValue: propTypes.string.def('')
})
const file = ref(props.modelValue)
watch(
  () => props.modelValue,
  (val: string) => {
    console.log('val', val)
    if (val === file.value) return
    file.value = val
  }
)
const emit = defineEmits(['update:modelValue'])

const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.code == '200') {
    // file.value = response.data
    // console.log(response.data)
    emit('update:modelValue', response.data.file_url)
  }
}

const onInput = (value) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <div class="w-[100%] flex justify-left">
    <ElInput v-model="file" @input="onInput" class="pr-3" />
    <ElUpload
      class="avatar-uploader"
      :show-file-list="false"
      :action="appStore.getUploadUrl"
      :on-success="handleAvatarSuccess"
    >
      <template #trigger>
        <ElButton type="primary">上传文件</ElButton>
      </template>
    </ElUpload>
  </div>
</template>
